<template>
  <el-drawer v-model="visible" :with-header="false" direction="rtl" size="16%">
    <el-form class="theme-switcher" label-position="top">
      <el-form-item label="主题">
        <el-switch v-model="dark" active-icon="moon" inactive-icon="sunny" />
      </el-form-item>

      <el-form-item label="缩放" class="theme-size">
        <el-radio-group v-model="size">
          <el-radio-button value="small" label="小" />
          <el-radio-button value="default" label="中" />
          <el-radio-button value="large" label="大" />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="主题色">
        <div class="theme-colors">
          <div v-for="(colors, name) of primitive" :key="name">
            <el-button
              circle
              :style="{
                backgroundColor: `${colors['500']}`,
                boxShadow:
                  color.name === name
                    ? '0 0 0 2px ' +
                      (dark ? '#000' : '#fff') +
                      ', 0 0 0 4px ' +
                      colors['500'] +
                      ', 0 1px 2px 0 black'
                    : 'none',
              }"
              :icon="color.name === name ? 'check' : ''"
              @click="color = { name, colors }"
            />
          </div>
        </div>
      </el-form-item>

      <el-form-item label="菜单栏背景透明">
        <el-switch v-model="menuBgTransparent" />
      </el-form-item>

      <el-form-item label="页面缓存">
        <el-switch v-model="keepAlive" />
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import primitive from './color'

export default {
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      primitive,
    }
  },
  computed: {
    visible: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      },
    },
    dark: {
      get() {
        return this.$store.getters.dark
      },
      set(value) {
        this.$store.commit('theme/SET_DARK', value)
      },
    },
    size: {
      get() {
        return this.$store.getters.size
      },
      set(value) {
        this.$store.commit('theme/SET_SIZE', value)
      },
    },
    color: {
      get() {
        return this.$store.getters.color
      },
      set(value) {
        this.$store.commit('theme/SET_COLOR', value)
      },
    },
    menuBgTransparent: {
      get() {
        return this.$store.getters.menuBgTransparent
      },
      set(value) {
        this.$store.commit('theme/SET_MENU_BG_TRANSPARENT', value)
      },
    },
    keepAlive: {
      get() {
        return this.$store.getters.keepAlive
      },
      set(value) {
        this.$store.commit('theme/SET_KEEP_ALIVE', value)
      },
    },
  },
}
</script>
<style>
.theme-switcher-button {
  box-shadow: -0.25rem 0 1rem #00000026;
}

.theme-switcher {
  padding: 1rem;

  h4 {
    margin: 1.5rem 0 1rem;
  }

  .theme-size {
    .el-radio {
      margin-right: 0 !important;
    }
  }

  .theme-colors {
    display: flex;
    flex-wrap: wrap;

    div {
      flex: 0 0 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 4rem;
    }
  }
}
</style>
